<template>

  <div class="pay-body-dialog">

    <!-- 列表信息-->
    <div class="background-white mess-list mem" v-if="!isEdit">
      <div>
        <el-row class="" style=" display: flex; flex-direction: row; align-items: center;padding-bottom: 6px">
          <el-col :span="2">订单号查询:</el-col>
          <el-col :span="3">
            <el-input
              placeholder="请输入"
              v-model="name"
              clearable>
            </el-input>
          </el-col>

          <el-col :span="1" :offset="1">状态:</el-col>
          <el-col :span="4">
            <el-select v-model="state" placeholder="请选择">
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="5" :offset="1">
            <el-button type="danger" size="mini">查询</el-button>
            <el-button size="mini">重置</el-button>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 16px">
        <el-table
          :data="messData"
          ref="multipleTable"
          style="width: 100%"
          :cell-style="{height:49+'px'}"
          :header-cell-style="{background:'#F3F4F7',color:'#999999'}"
          @selection-change="handleSelectionChange"
        >

          <el-table-column
            label="订单名称"
            prop="orderName">
          </el-table-column>
          <el-table-column
            label="项目负责人"
            prop="name">
          </el-table-column>

          <el-table-column
            label="客户名称"
            prop="customerName"

          >
          </el-table-column>

          <el-table-column
            label="客户联系方式"

          >
            <template slot-scope="scope">
              <span v-if="scope.row.isSelected"> {{ scope.row.phone }}</span>
              <span v-if="!scope.row.isSelected"> {{ scope.row.phone }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="客户住址"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.isSelected"> {{ scope.row.address }}</span>
              <span v-if="!scope.row.isSelected"> {{ scope.row.address }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"

          >
            <template slot-scope="scope">
              <span v-if="scope.row.state==1"><span style="color: #FFBF00">●</span> 待分配</span>
              <span v-if="scope.row.state==2"><span style="color: #FFBF00">●</span> 待反馈</span>
              <span v-if="scope.row.state==3" style="color: #00A854"><span>●</span> 已反馈</span>
              <span v-if="scope.row.state==4"><span style="color: #BFBFBF">●</span> 未支付</span>
              <span v-if="scope.row.state==5"><span style="color: #0E77D1">●</span> 进行中</span>
              <span v-if="scope.row.state==6"><span style="color: #00A854">●</span> 已完成</span>
              <span v-if="scope.row.state==7"><span style="color: #CC0000">●</span> 已落选</span>
              <span v-if="scope.row.state==8"><span style="color: #FFBF00">●</span> 已过期</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="right"
          >
            <template slot-scope="scope">
              <div>
                <!-- 待分配-->
                <span v-if="scope.row.state==1">
                 <el-tooltip placement="bottom-end" effect="light">
               <el-button type="text">分配<i class="el-icon-caret-bottom"> </i></el-button>
              <div slot="content">
                <div style="cursor: pointer;">
                  <div style="width: 180px">
                    <div style="padding: 10px" v-for="(item,index) in messData" :key="index" @click="assign(item)">
                       <span style="color: #333333;font-size: 13px">罗国归</span>
                    </div>
                  </div>
                </div>
              </div>
            </el-tooltip>

                </span>
                <!--待反馈-->
                <span v-if="scope.row.state==2">
                  <el-button type="text">编辑方案</el-button>
                </span>

                <!--  未支付-->
                <span v-if="scope.row.state==4">
                  <el-button type="text" @click="showPay">去支付</el-button>
                     <el-button type="text" style="margin-left: 24px">编辑方案</el-button>
                </span>

                <!--已完成-->
                <span v-if="scope.row.state==6">
                  <el-button type="text" @click="upload_doc">上传档案</el-button>
                </span>


                <!-- 查看-->
                <el-button type="text" style="margin-left: 24px">查看</el-button>
              </div>

            </template>
          </el-table-column>
        </el-table>
      </div>

      <div style="margin-top: 30px;text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </div>
    </div>

    <!--上传档案-->
    <div v-if="isEdit">
      <div class="background-white">
        <div>
          <upload @save="save"></upload>
        </div>
      </div>
    </div>

    <!--支付-->
    <el-dialog
      title="选择支付方式"
      :visible.sync="isPay"
      width="30%"
    >
      <div style="border-bottom: 1px solid #f2f2f2;padding-left:20px ;padding-bottom: 15px">
        <div class="pay-suc-top">
          <img :src="pay_suc" style="">
          <span>付款提交方案</span>
        </div>
        <p class="pay-tip">早一步提交方案早一步获取项目！</p>
        <p>支付金额：<span style="color: #cc0000;">￥50</span></p>
      </div>
      <div slot="footer" class="dialog-pay">
        <div class="border-1" @click="goPay">
          <img :src="weixin_pay">
        </div>
        <div class="border-1">
          <img :src="ali_pay">
        </div>
      </div>
    </el-dialog>

  </div>

</template>

<script>
  import {mapMutations, mapState} from 'vuex'
  import upload from "./upload_doc";

  import pay_suc from 'assets/icons/pay.svg'
  import weixin_pay from 'assets/icons/weixin_pay.svg'
  import ali_pay from 'assets/icons/ali_pay.svg'

  export default {
    layout: 'frame',
    name: "index",
    components: {
      upload
    },
    data() {
      return {
        breadTitle: '订单管理',
        state: '',
        pay_suc: pay_suc,
        weixin_pay: weixin_pay,
        ali_pay: ali_pay,
        isPay: false,
        states: [
          {
            value: '1',
            label: '待分配'
          },
          {
            value: '2',
            label: '待反馈'
          },
          {
            value: '3',
            label: '已反馈'
          },
          {
            value: '4',
            label: '未支付'
          },
          {
            value: '5',
            label: '进行中'
          },
          {
            value: '6',
            label: '已完成'
          },
          {
            value: '7',
            label: '已落选'
          },
          {
            value: '8',
            label: '已过期'
          },
        ],
        messData: [
          {
            id: 1,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '方案被选中后展示',
            address: '方案被选中后展示',
            state: '1',
            isSelected: false

          }, {
            id: 2,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '方案被选中后展示',
            address: '方案被选中后展示',
            state: '2',
            isSelected: false

          }, {
            id: 3,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '3',
            isSelected: true

          }, {
            id: 4,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '4',
            isSelected: true

          }, {
            id: 5,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '5',
            isSelected: true
          }, {
            id: 6,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '6',
            isSelected: true
          }, {
            id: 7,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '7',
            isSelected: true
          }, {
            id: 8,
            orderName: '贵州省贵阳市党性教育培训',
            name: '罗国归',
            customerName: '张小伞',
            phone: '11111111111',
            address: '贵州省贵阳市花溪区大学城双创园E栋2层',
            state: '8',
            isSelected: true
          }],

      }
    },
    beforeUpdate() {
      this.initInfo()
    },
    computed: {
      //控制是否显示导航
      ...mapState({
        isShowBread: state => state.filter.isShowBread
      }),

      //编辑
      ...mapState({
        isEdit: state => state.filter.isEdit
      }),

    },
    methods: {
      ...mapMutations('filter', [
        'SetIsShowBread', 'SetCurrentPath', 'SetIsEdit'
      ]),
      //初试化
      initInfo() {
        this.SetIsShowBread(true);  //设置面包屑导航是否显示

        //面包屑显示后内容
        if (this.isShowBread && !this.isEdit && !this.isAdd) {
          this.SetCurrentPath({url: '/', title: this.breadTitle});
        } else if (this.isEdit) {
          this.SetCurrentPath({url: '/', title: '上传档案'});
          this.SetIsEdit(true);
        }
      },

      //编辑
      upload_doc(index, row) {
        this.SetIsEdit(true);
        this.initInfo();
      },

      //来自编辑的删除
      deleteRow(options) {
        this.$confirm('是否确定删除该成员？')
          .then(_ => {
            let id = options.id;
            this.messData.forEach((initRow, index) => {
              if (id == initRow.id) {
                this.messData.splice(index, 1);
                this.SetIsEdit(false);
                //请求
              }
            })
          })
          .catch(_ => {
          });
      },

      //分配
      assign(item) {
        this.$confirm('是否将订单分配给' + item.name + '?')
          .then(_ => {
          })
          .catch(_ => {
          });
      },

      //去支付
      showPay() {
        this.isPay = true;
      },

      //分类--支付
      goPay(){
        this.$router.push({
          path:'/workPlatform/orderManagement/orderSuccess'
        })
      },

      //上传档案
      save(options) {
        console.log(options)
        this.SetIsEdit(false);
        this.initInfo();
      },

      //总操作数据源
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    },
  }
</script>

<style lang="scss">

  .pay-suc-top {
    display: flex;
    flex-direction: row;
    align-items: center;

    img {
      width: 24px;
      height: 24px
    }

    span {
      margin-left: 9px;
      font-size: 18px;
      color: #333333;
    }
  }

  .pay-tip {
    margin-top: 14px;
    margin-bottom: 9px;
    font-size: 14px;
    color: #333333;
  }

  .dialog-pay {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;

    .border-1 {
      padding: 12px 38px;
      border: 1px solid #f2f2f2;
    }

    .border-1:hover {
      cursor: pointer;
    }

    img {
      width: 100px;
      height: 32px;
    }
  }

</style>
